<template>
    <Modal :mask-closable="false"
            v-model="orderDetailVisible"
            title="新增工单"
            :fullscreen="true"
            :footer-hide="true"
            @on-visible-change="handleVisibleChange"
    >
        <Form ref="orderAddForm" :model="detailObj" :label-width="200">
            <div class="basic-info">
                <div class="basic-info-title">
                    <h2>{{$t('fault.WorkOrderInformation')}}</h2>
                </div>
                <div class="basic-info-body">
                    <Row style="border-top: 1px solid #eee;border-bottom: 1px solid #eee">
                        <Col span="8">
                            <FormItem label="维修单号">
                                <div class="basic-info-body-item">{{ detailObj.workorderNo }}</div>
                            </FormItem>
                        </Col>
                        <Col span="8">
                            <FormItem label="故障时间">
                                <div class="basic-info-body-item">{{ detailObj.faultTime }}</div>
                            </FormItem>
                        </Col>
                        <Col span="8">
                            <FormItem label="维修申请时间">
                                <div class="basic-info-body-item">{{ detailObj.createTime }}</div>
                            </FormItem>
                        </Col>
                    </Row>
                    <Row style="border-bottom: 1px solid #eee">
                        <Col span="8">
                            <FormItem label="报修人">
                                <div class="basic-info-body-item">{{ detailObj.createBy }}</div>
                            </FormItem>
                        </Col>
                        <Col span="8">
                            <FormItem label="故障现象">
                                <Tooltip max-width="200" v-if="detailObj.faultNote" style="margin-left: 10px">
                                    <div class="over-wrapper">{{ detailObj.faultNote }}</div>
                                    <div slot="content">
                                        <p>{{ detailObj.faultNote }}</p>
                                    </div>
                                </Tooltip>
                                <div class="preview" v-if="detailObj.photos && detailObj.photos.length">
                                    <Badge :count="detailObj.photos ? detailObj.photos.length : 0">
                                        <div class="preview-img">
                                            <viewer :images="detailObj.photos">
                                                <img
                                                        v-for="(src,index) in detailObj.photos"
                                                        :src="src"
                                                        :key="index"
                                                >
                                            </viewer>
                                        </div>
                                    </Badge>
                                </div>
                            </FormItem>
                        </Col>
                        <Col span="8">
                            <FormItem label="是否影响生产">
                                <div class="basic-info-body-item">{{ detailObj.effected }}</div>
                            </FormItem>
                        </Col>
                    </Row>
                    <Row style="border-bottom: 1px solid #eee">
                        <Col span="8">
                            <FormItem label="维修紧迫程度">
                                <div class="basic-info-body-item">{{ detailObj.urgentLevel }}</div>
                            </FormItem>
                        </Col>
                        <Col span="8">
                            <FormItem label="工单等级">
                                <div class="basic-info-body-item">{{ detailObj.orderLevel }}</div>
                            </FormItem>
                        </Col>
                        <Col span="8">
                            <FormItem label="生产主管">
                                <div class="basic-info-body-item">{{ detailObj.confirmBy }}</div>
                            </FormItem>
                        </Col>
                    </Row>
                    <Row style="border-bottom: 1px solid #eee">
                        <Col span="8">
                            <FormItem v-if="!changeEdit.edit1 || !workorderUpdateTimes" label="生产主管确认时间">
                                <div class="basic-info-body-item">
                                    {{ detailObj.adminConfirmTime ? $moment(detailObj.adminConfirmTime).format('YYYY-MM-DD HH:mm:ss') : ''}}
                                    <Icon size="18" type="ios-brush-outline" color="#180fff" @click="handleChangeEdit(1)"/>
                                </div>
                            </FormItem>
                            <FormItem v-else label="生产主管确认时间">
                                <Row>
                                    <Col :span="20">
                                        <DatePicker
                                                v-model="detailObj.adminConfirmTime"
                                                type="datetime"
                                                format="yyyy-MM-dd HH:mm:ss"
                                                :placeholder="`${$t('common.selectInfo')}`"
                                        >
                                        </DatePicker>
                                    </Col>
                                    <Col :span="4">
                                        <Icon size="20" type="md-checkmark" color="#19be6b" @click="handleChangeEdit(1, 'update')"/>
                                    </Col>
                                </Row>
                            </FormItem>
                        </Col>
                        <Col span="8">
                            <FormItem label="接单人">
                                <div class="basic-info-body-item">{{ detailObj.receBy }}</div>
                            </FormItem>
                        </Col>
                        <Col span="8">
                            <FormItem v-if="!changeEdit.edit2 || !workorderUpdateTimes" label="接单时间">
                                <div class="basic-info-body-item">
                                    {{ detailObj.receTime ? $moment(detailObj.receTime).format('YYYY-MM-DD HH:mm:ss') : ''}}
                                    <Icon size="18" type="ios-brush-outline" color="#180fff" @click="handleChangeEdit(2)"/>
                                </div>
                            </FormItem>
                            <FormItem v-else label="接单时间">
                                <Row>
                                    <Col :span="20">
                                        <DatePicker

                                                v-model="detailObj.receTime"
                                                type="datetime"
                                                format="yyyy-MM-dd HH:mm:ss"
                                                :placeholder="`${$t('common.selectInfo')}`">
                                        </DatePicker>
                                    </Col>
                                    <Col :span="4">
                                        <Icon size="20" type="md-checkmark" color="#19be6b" @click="handleChangeEdit(2, 'update')"/>
                                    </Col>
                                </Row>
                            </FormItem>
                        </Col>
                    </Row>
                    <Row style="border-bottom: 1px solid #eee">
                        <Col span="8">
                            <FormItem v-if="!changeEdit.edit3 || !workorderUpdateTimes" label="故障确认时间">
                                <div class="basic-info-body-item">
                                    {{ detailObj.deterTime ? $moment(detailObj.deterTime).format('YYYY-MM-DD HH:mm:ss') : ''}}
                                    <Icon size="18" type="ios-brush-outline" color="#180fff" @click="handleChangeEdit(3)"/>
                                </div>
                            </FormItem>
                            <FormItem v-else label="故障确认时间">
                                <Row>
                                    <Col :span="20">
                                        <DatePicker

                                                v-model="detailObj.deterTime"
                                                type="datetime"
                                                format="yyyy-MM-dd HH:mm:ss"
                                                :placeholder="`${$t('common.selectInfo')}`">
                                        </DatePicker>
                                    </Col>
                                    <Col :span="4">
                                        <Icon size="20" type="md-checkmark" color="#19be6b" @click="handleChangeEdit(3, 'update')"/>
                                    </Col>
                                </Row>
                            </FormItem>
                        </Col>
                        <Col span="8">
                            <FormItem label="委外确认人">
                                <div class="basic-info-body-item">{{ detailObj.outConfirmBy }}</div>
                            </FormItem>
                        </Col>
                        <Col span="8">
                            <FormItem v-if="!changeEdit.edit4 || !workorderUpdateTimes" label="委外确认时间">
                                <!--                            <div class="basic-info-body-item" v-if="statusText == 5">-->
                                <!--                                {{ detailObj.outConfirmTime ? $moment(detailObj.outConfirmTime).format('YYYY-MM-DD HH:mm:ss') : $moment(new Date()).format('YYYY-MM-DD HH:mm:ss') }}-->
                                <!--                                <Icon size="18" type="ios-brush-outline" color="#180fff" @click="handleChangeEdit(4)"/>-->
                                <!--                            </div>-->
                                <div class="basic-info-body-item">
                                    {{ detailObj.outConfirmTime ? $moment(detailObj.outConfirmTime).format('YYYY-MM-DD HH:mm:ss') : '' }}
                                    <Icon size="18" type="ios-brush-outline" color="#180fff" @click="handleChangeEdit(4)"/>
                                </div>
                            </FormItem>
                            <FormItem v-else label="委外确认时间">
                                <Row>
                                    <Col :span="20">
                                        <DatePicker

                                                v-model="detailObj.outConfirmTime"
                                                type="datetime"
                                                format="yyyy-MM-dd HH:mm:ss"
                                                :placeholder="`${$t('common.selectInfo')}`">
                                        </DatePicker>
                                    </Col>
                                    <Col :span="4">
                                        <Icon size="20" type="md-checkmark" color="#19be6b" @click="handleChangeEdit(4, 'update')"/>
                                    </Col>
                                </Row>
                            </FormItem>
                        </Col>
                    </Row>
                    <Row style="border-bottom: 1px solid #eee">
                        <Col span="8">
                            <FormItem v-if="!changeEdit.edit5 || !workorderUpdateTimes" label="维修开始时间">
                                <div class="basic-info-body-item">
                                    {{ detailObj.startTime ? $moment(detailObj.startTime).format('YYYY-MM-DD HH:mm:ss') : ''}}
                                    <Icon size="18" type="ios-brush-outline" color="#180fff" @click="handleChangeEdit(5)"/>
                                </div>
                            </FormItem>
                            <FormItem v-else label="维修开始时间">
                                <Row>
                                    <Col :span="20">
                                        <DatePicker

                                                v-model="detailObj.startTime"
                                                type="datetime"
                                                format="yyyy-MM-dd HH:mm:ss"
                                                :placeholder="`${$t('common.selectInfo')}`">
                                        </DatePicker>
                                    </Col>
                                    <Col :span="4">
                                        <Icon size="20" type="md-checkmark" color="#19be6b" @click="handleChangeEdit(5, 'update')"/>
                                    </Col>
                                </Row>
                            </FormItem>
                        </Col>
                        <Col span="8">
                            <FormItem v-if="!changeEdit.edit6 || !workorderUpdateTimes" label="维修完工时间">
                                <div class="basic-info-body-item">
                                    {{ detailObj.completeTime ? $moment(detailObj.completeTime).format('YYYY-MM-DD HH:mm:ss') : ''}}
                                    <Icon size="18" type="ios-brush-outline" color="#180fff" @click="handleChangeEdit(6)"/>
                                </div>
                            </FormItem>
                            <FormItem v-else label="维修完工时间">
                                <Row>
                                    <Col :span="20">
                                        <DatePicker
                                                v-model="detailObj.completeTime"
                                                type="datetime"
                                                format="yyyy-MM-dd HH:mm:ss"
                                                :placeholder="`${$t('common.selectInfo')}`">
                                        </DatePicker>
                                    </Col>
                                    <Col :span="4">
                                        <Icon size="20" type="md-checkmark" color="#19be6b" @click="handleChangeEdit(6, 'update')"/>
                                    </Col>
                                </Row>
                            </FormItem>
                        </Col>
                        <Col span="8">
                            <FormItem label="验收人">
                                <div class="basic-info-body-item">{{ detailObj.acceptBy }}</div>
                            </FormItem>
                        </Col>
                    </Row>
                    <Row>
                        <Col span="8" style="border-bottom: 1px solid #eee;">
                            <FormItem v-if="!changeEdit.edit7 || !workorderUpdateTimes" label="维修验收时间">
                                <div class="basic-info-body-item">
                                    {{ detailObj.acceptTime ? $moment(detailObj.acceptTime).format('YYYY-MM-DD HH:mm:ss') : ''}}
                                    <Icon size="18" type="ios-brush-outline" color="#180fff" @click="handleChangeEdit(7)"/>
                                </div>
                            </FormItem>
                            <FormItem v-else label="维修验收时间">
                                <Row>
                                    <Col :span="20">
                                        <DatePicker

                                                v-model="detailObj.acceptTime"
                                                type="datetime"
                                                format="yyyy-MM-dd HH:mm:ss"
                                                :placeholder="`${$t('common.selectInfo')}`">
                                        </DatePicker>
                                    </Col>
                                    <Col :span="4">
                                        <Icon size="20" type="md-checkmark" color="#19be6b" @click="handleChangeEdit(7, 'update')"/>
                                    </Col>
                                </Row>
                            </FormItem>
                        </Col>
                        <Col span="8" style="border-bottom: 1px solid #eee;">
                            <FormItem label="报修人电话">
                                <div class="basic-info-body-item">{{ detailObj.faultPhone }}</div>
                            </FormItem>
                        </Col>
                    </Row>
                </div>
            </div>
            <div class="basic-info">
                <div class="basic-info-title">
                    <h2>设备信息</h2>
                </div>
                <div class="basic-info-body">
                    <Row style="border-top: 1px solid #eee;border-bottom: 1px solid #eee">
                        <Col span="8">
                            <FormItem :label="`${$t('maintenance.EquipmentName')}:`">
                                <div class="basic-info-body-item">{{ detailObj.deviceName }}</div>
                            </FormItem>
                        </Col>
                        <Col span="8">
                            <FormItem :label="`${$t('common.machineno')}:`">
                                <div class="basic-info-body-item">{{ detailObj.deviceNo }}</div>
                            </FormItem>
                        </Col>
                        <Col span="8">
                            <FormItem :label="`${$t('maintenance.EquipmentNo')}:`">
                                <div class="basic-info-body-item">{{ detailObj.deviceMId }}</div>
                            </FormItem>
                        </Col>
                    </Row>
                    <Row style="border-bottom: 1px solid #eee">
                        <Col span="8">
                            <FormItem :label="`${$t('maintenance.EquipmentType')}:`">
                                <div class="basic-info-body-item">{{ detailObj.categoryName }}</div>
                            </FormItem>
                        </Col>
                        <Col span="8">
                            <FormItem label="生产线描述">
                                <div class="basic-info-body-item">{{ detailObj.productionLine }}</div>
                            </FormItem>
                        </Col>
                        <Col span="8">
                            <FormItem label="使用公司">
                                <div class="basic-info-body-item">{{ detailObj.useCompanyName }}</div>
                            </FormItem>
                        </Col>
                    </Row>
                    <Row>
                        <Col span="8" style="border-bottom: 1px solid #eee">
                            <FormItem label="所属部门负责人">
                                <div class="basic-info-body-item">{{ detailObj.belongDeptAdminName }}</div>
                            </FormItem>
                        </Col>
                        <Col span="8" style="border-bottom: 1px solid #eee">
                            <FormItem label="厂务中心负责人">
                                <div class="basic-info-body-item">{{ detailObj.factoryAdminName }}</div>
                            </FormItem>
                        </Col>
                        <Col span="8" style="border-bottom: 1px solid #eee">
                            <FormItem label="生产料号">
                                <div class="basic-info-body-item">{{ detailObj.productNo }}</div>
                            </FormItem>
                        </Col>
                    </Row>
                </div>
            </div>
            <div class="basic-info">
                <div class="basic-info-title">
                    <h2>故障判定记录</h2>
                </div>
                <div class="basic-info-body">
                    <Row style="border-top: 1px solid #eee;border-bottom: 1px solid #eee">
                        <Col span="8">
                            <FormItem label="故障分类" required>
                                <div class="basic-info-body-item">{{ detailObj.firstclass ? `${detailObj.firstclass}/${detailObj.secondclass}` : '' }}</div>
<!--                                <Select v-model="detailObj.faultId" class="Input-wrapper" :disabled="statusText != 4">-->
<!--                                    <Option v-for="item in mainTypeList" :value="item.value" :key="item.value">{{ item.label }}</Option>-->
<!--                                </Select>-->
                            </FormItem>
                        </Col>
                        <Col span="8">
                            <FormItem label="故障信息" required>
                                <AutoComplete
                                        v-model="detailObj.elecFaultNote"
                                        clearable
                                        @on-search="handleRemote"
                                        @on-change="handleChangeWl"
                                        class="Input-wrapper"
                                        v-if="statusText == 4">
                                    <Option v-for="item in infoList" :value="item.faultName" :key="item.faultName">{{ item.faultName }}</Option>
                                </AutoComplete>
                                <Input v-else v-model="detailObj.elecFaultNote" class="Input-wrapper" :disabled="statusText != 4"/>
                            </FormItem>
                        </Col>
                        <Col span="8">
                            <FormItem label="电路板指示灯信息">
                                <Input v-model="detailObj.lightInfo" class="Input-wrapper" :disabled="statusText != 4"/>
                            </FormItem>
                        </Col>
                    </Row>
                    <Row style="border-bottom: 1px solid #eee">
                        <Col span="8">
                            <FormItem label="设备有无损坏">
                                <RadioGroup v-model="detailObj.broken">
                                    <Radio v-for="item in brokenList" :key="item.id" :label="item.id" :disabled="statusText != 4">{{ item.name }}</Radio>
                                </RadioGroup>
<!--                                <Input v-model="detailObj.broken" class="Input-wrapper" :disabled="statusText != 4"/>-->
                            </FormItem>
                        </Col>
                        <Col span="8">
                            <FormItem label="协助维修人">
                                <Input v-model="detailObj.assit" class="Input-wrapper" @on-focus="handleChooseChange" :disabled="statusText != 4"/>
                            </FormItem>
                        </Col>
                        <Col span="8">
                            <FormItem label="维修方式" required>
                                <Select v-model="detailObj.mainTyppe" @on-change="handleRepairChange" class="Input-wrapper" :disabled="statusText != 4">
                                    <Option v-for="item in repairList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                                </Select>
                            </FormItem>
                        </Col>
                    </Row>
                    <Row>
                        <!--                    v-show="!isRepair"-->
                        <Col span="8">
                            <FormItem label="需求完工日期" required>
                                <DatePicker
                                        v-model="detailObj.requireTime"
                                        type="datetime"
                                        format="yyyy-MM-dd HH:mm:ss"
                                        :placeholder="`${$t('common.selectInfo')}`"
                                        class="Input-wrapper"
                                        :options="requireTimeOptions"
                                        :disabled="statusText != 4"
                                />
                            </FormItem>
                        </Col>
                        <Col span="8" v-show="isRepair">
                            <FormItem label="是否需要采购备件" required>
                                <RadioGroup v-model="detailObj.purchased" @on-change="handleDeviceChange">
                                    <Radio v-for="equ in equipmentConditions" :key="equ.id" :label="equ.id" :disabled="statusText != 4">{{ equ.value }}</Radio>
                                </RadioGroup>
                            </FormItem>
                        </Col>
                    </Row>
                    <Row style="border-top: 1px solid #eee;border-bottom: 1px solid #eee">
                        <Col span="24">
                            <FormItem label="故障原因分析" required>
                                <Input v-model="detailObj.faultReason" :maxlength="250" class="Input-wrapper" :disabled="statusText != 4"/>
                            </FormItem>
                        </Col>
                    </Row>
                    <Row style="border-bottom: 1px solid #eee">
                        <Col span="24">
                            <FormItem label="解决办法和预防措施" required>
                                <Input v-model="detailObj.solutions" :maxlength="250" class="Input-wrapper" :disabled="statusText != 4"/>
                            </FormItem>
                        </Col>
                    </Row>
                    <Row style="border-bottom: 1px solid #eee">
                        <Col span="24">
                            <FormItem label="备注">
                                <Input v-model="detailObj.elecWarn" class="Input-wrapper" :disabled="statusText != 4"/>
                            </FormItem>
                        </Col>
                    </Row>
                </div>
            </div>
            <div class="basic-info">
                <div class="basic-info-title">
                    <!--                <span></span>-->
                    <h2>委外记录</h2>
                </div>
                <div class="basic-info-body">
                    <Row style="border-top: 1px solid #eee;border-bottom: 1px solid #eee">
                        <Col span="8">
                            <FormItem label="委外审批单据" required>
                                <div class="basic-info-body-item">
                                    <Upload
                                            ref="fileUpload"
                                            :show-upload-list="false"
                                            :before-upload="handleBeforeUpload"
                                            type="drag"
                                            action=""
                                            v-if="statusText == 6"
                                    >
                                        <Button type="primary">{{$t('preliminary.Upload')}}</Button>
                                    </Upload>
                                    <div class="upload-wrapper">
                                        <span>{{ detailObj.checkFile }}</span>
                                        <div class="upload-action" v-if="detailObj.checkFile">
                                            <icon type="ios-eye-outline" size="20" color="#fff" @click="handlePreview(0,detailObj.checkFileUrl)"></icon>
                                            <icon type="ios-trash-outline" size="20" color="#fff" @click="handleDeleteUpload(0)" v-if="statusText == 5"></icon>
                                        </div>
                                    </div>
                                </div>
                            </FormItem>
                        </Col>
                        <Col span="8">
                            <FormItem label="SAP申请单号">
                                <div class="basic-info-body-item">{{ detailObj.sapNo }}</div>
                            </FormItem>
                        </Col>
                        <Col span="8">
                            <FormItem label="委外验收单据">
                                <div class="basic-info-body-item">
                                    <Upload
                                            ref="fileUpload"
                                            :show-upload-list="false"
                                            :before-upload="handleAcceptBeforeUpload"
                                            type="drag"
                                            action=""
                                            v-if="statusText == 9"
                                    >
                                        <Button type="primary">上传文件</Button>
                                    </Upload>
                                    <div class="upload-wrapper">
                                        <span>{{ detailObj.acceptFile }}</span>
                                        <div class="upload-action" v-if="detailObj.acceptFile">
                                            <icon type="ios-eye-outline" size="20" color="#fff" @click="handlePreview(1,detailObj.acceptFileUrl)"></icon>
                                            <icon type="ios-trash-outline" size="20" color="#fff" @click="handleDeleteUpload(1)" v-if="statusText == 8"></icon>
                                        </div>
                                    </div>
                                </div>
                            </FormItem>
                        </Col>
                    </Row>
                    <Row style="border-bottom: 1px solid #eee">
                        <Col span="8">
                            <FormItem label="采购单号">
                                <div class="basic-info-body-item">{{ detailObj.poNo }}</div>
                            </FormItem>
                        </Col>
                        <Col span="8">
                            <FormItem label="维修单位">
                                <div class="basic-info-body-item">{{ detailObj.maintainUnit }}</div>
                            </FormItem>
                        </Col>
                        <Col span="8">
                            <FormItem label="到位日期">
                                <div class="basic-info-body-item">{{ detailObj.arriveDate }}</div>
                            </FormItem>
                        </Col>
                    </Row>
                </div>
            </div>
            <div class="basic-info" v-show="(isDevice && detailObj.purchased == 1)">
                <div class="basic-info-title">
                    <h2>备件采购记录</h2>
                    <Button type="primary" ghost shape="circle" icon="md-add" @click="handleAddDevice" v-if="statusText == 4">添加备件采购</Button>
                </div>
                <div class="basic-info-body">
                    <div class="tableContent">
                        <Table
                                :columns="makeColumns"
                                :data="makeDataSource"
                        >
                            <template slot-scope="{ row, index }" slot="action">
                                <span class="operationBtn" @click="handleDeviceDelete(index)" v-if="statusText == 4">{{$t('common.Delete')}}</span>
                            </template>
                        </Table>
                    </div>
                </div>
            </div>



        </Form>
        <div class="btn-wrapper">
            <Row :gutter="16" class="btn-action">
                <Col span="6" offset="12">
                    <Button style="margin-right: 10px" @click="handleWorkCancel">{{$t('common.Cancle')}}</Button>
                    <Button type="primary" :loading="loadingVisible" @click="handleSave" v-if="workorderAttachmentAdd">委外确认</Button>
                </Col>
            </Row>
        </div>

    </Modal>
</template>

<script>
    export default {
        name: "waitConfirmModal",
        props: ['workorderUpdateTimes','workorderAttachmentAdd'],
        data() {
            return {
                fileId: '',
                deleteId: '',
                statusText: '',
                isDevice: false,
                isRepair: false,
                isOther: false,
                isResult: false,
                isResultNumber: false,
                orderDetailVisible: false,
                loadingVisible: false,
                deleteVisible: false,
                fileDeleteVisible: false,
                fileDeleteLoading: false,
                loadingDelete: false,
                searchLoading: false,
                detailObj: {
                    days: null,
                    result: ''
                },
                validateOrder: {},
                requireTimeOptions: {
                    disabledDate: (date) => {
                        // let receTime = this.detailObj.receTime ? this.detailObj.receTime : ''
                        // console.log(this.detailObj.receTime)
                        return date && date.valueOf() < new Date(this.detailObj.receTime).valueOf();
                    }
                },
                changeEdit: {
                    edit1: false,
                    edit2: false,
                    edit3: false,
                    edit4: false,
                    edit5: false,
                    edit6: false,
                    edit7: false,
                },
                infoList: [],
                mainTypeList: [],
                brokenList: [{id: 1, name: '有'},{id: 2, name: '无'}],
                equipmentConditions: [{id: 0, value: '否'},{id: 1, value: '是'}],
                repairList: [{value: 1, label: '自行维修'},{value: 2, label: '保修期内维修'},{value: 3, label: '委外维修'}],
                resultList: [{ id: '1', name: '维修完成，设备正常'}, { id: '2', name: '维修正常，有待观察'}],
                makeColumns: [
                    {
                        title: `${this.$t('common.SpareNumber')}`,
                        key: 'maCode',
                        align: 'center',
                        // minWidth: 120
                    },
                    {
                        title: `${ this.$t('equipCheck.Model') }`,
                        key: 'maModel',
                        align: 'center',
                        // minWidth: 120,
                    },

                    {
                        title: '备件名称',
                        key: 'maName',
                        align: 'center',
                        // minWidth: 120
                    },
                    {
                        title: 'SAP申请单号',
                        key: 'sapNo',
                        align: 'center',
                        // minWidth: 120
                    },
                    {
                        title: '所需数量',
                        key: 'useNum',
                        align: 'center',
                        // minWidth: 120
                    },
                    {
                        title: '采购数量',
                        key: 'purchaseNum',
                        align: 'center',
                        // minWidth: 120
                    },
                    {
                         title: `${ this.$t('maintenance.Unit') }`,
                        key: 'maUnit',
                        align: 'center',
                        // minWidth: 120
                    },
                    {
                         title: `${this.$t('spareParts.InventoryQuantity')}`,
                        key: 'stockNum',
                        align: 'center',
                        // minWidth: 120
                    },
                    {
                        title: '备件最新状态',
                        key: 'bjStatus',
                        align: 'center',
                        // minWidth: 120
                    },
                    {
                        title: '备件单价（元）',
                        key: 'maPrice',
                        align: 'center',
                        // minWidth: 120
                    },
                    {
                       title: `${ this.$t('common.remarks') }`,
                        key: 'note',
                        align: 'center',
                        // minWidth: 120
                    },
                    {
                        title: `${ this.$t('common.operation') }`,
                        key: 'action',
                        align: 'center',
                        slot: 'action'
                    }
                ],
                makeDataSource: [],
                repairColumns: [
                    {
                        title: '物料编号',
                        key: 'maCode',
                        align: 'center',
                        minWidth: 120
                    },
                    {
                        title: '物料名称',
                        key: 'maName',
                        align: 'center',
                        minWidth: 120,
                    },

                    {
                        title: `${ this.$t('equipCheck.Model') }`,
                        key: 'maModel',
                        align: 'center',
                        minWidth: 120
                    },
                    {
                         title: `${ this.$t('spareParts.usageAmount') }`,
                        key: 'useNum',
                        align: 'center',
                        minWidth: 120
                    },
                    {
                        title: `${ this.$t('maintenance.Unitprice') }`,
                        key: 'maPrice',
                        align: 'center',
                        minWidth: 120
                    },
                    {
                         title: `${ this.$t('maintenance.totalprice') }`,
                        key: 'totalPrice',
                        align: 'center',
                        minWidth: 120
                    },
                    {
                        title: '处理方式及结果',
                        key: 'solutions',
                        align: 'center',
                        minWidth: 120
                    },
                    {
                        title: '维修单位',
                        key: 'maintainUnit',
                        align: 'center',
                        minWidth: 120
                    },
                    {
                        title: '维修人',
                        key: 'maintainBy',
                        align: 'center',
                        minWidth: 120
                    },
                    {
                        title: `${ this.$t('common.operation') }`,
                        slot: "action",
                        align: 'center',
                        minWidth: 200
                    },
                ],
                repairDataSource: []
            }
        },
        watch: {
            requireTimeOptions(value) {
                console.log(value)
            },
            detailObj(value) {
                console.log(value)
                this.detailObj.result = value.result
            }
        },
        created() {
            this.getMainList()
        },
        methods: {
            /**************编辑状态切换***************/
            handleChangeEdit(type, confirm) {
                if (type == 1) {
                    this.changeEdit.edit1 = !this.changeEdit.edit1
                    if (confirm == 'update') {
                        let data = {
                            id: this.detailObj.id,
                            adminConfirmTime: this.detailObj.adminConfirmTime ? this.$moment(this.detailObj.adminConfirmTime).format('YYYY-MM-DD HH:mm:ss') : ''
                        }
                        this.axios({
                            method: 'post',
                            url: '/workorder/workorder/updateTimes',
                            data
                        }).then(res => {
                            if (res.code === 200) {
                                this.$Message.success(({content:'修改成功！',duration:3,closable:true}))
                            }else {
                                this.$Message.warning(({content:res.msg,duration:6,closable:true}))
                            }
                        })
                    }
                }else if (type == 2) {
                    this.changeEdit.edit2 = !this.changeEdit.edit2
                    if (confirm == 'update') {
                        let data = {
                            id: this.detailObj.id,
                            receTime: this.detailObj.receTime ? this.$moment(this.detailObj.receTime).format('YYYY-MM-DD HH:mm:ss') : ''
                        }
                        this.axios({
                            method: 'post',
                            url: '/workorder/workorder/updateTimes',
                            data
                        }).then(res => {
                            if (res.code === 200) {
                                this.$Message.success(({content:'修改成功！',duration:3,closable:true}))
                            }else {
                                this.$Message.warning(({content:res.msg,duration:6,closable:true}))
                            }
                        })
                    }
                }else if (type == 3) {
                    this.changeEdit.edit3 = !this.changeEdit.edit3
                    if (confirm == 'update') {
                        let data = {
                            id: this.detailObj.id,
                            deterTime: this.detailObj.deterTime ? this.$moment(this.detailObj.deterTime).format('YYYY-MM-DD HH:mm:ss') : ''
                        }
                        this.axios({
                            method: 'post',
                            url: '/workorder/workorder/updateTimes',
                            data
                        }).then(res => {
                            if (res.code === 200) {
                                this.$Message.success(({content:'修改成功！',duration:3,closable:true}))
                            }else {
                                this.$Message.warning(({content:res.msg,duration:6,closable:true}))
                            }
                        })
                    }
                }else if (type == 4) {
                    this.changeEdit.edit4 = !this.changeEdit.edit4
                    if (confirm == 'update') {
                        let data = {
                            id: this.detailObj.id,
                            outConfirmTime: this.detailObj.outConfirmTime ? this.$moment(this.detailObj.outConfirmTime).format('YYYY-MM-DD HH:mm:ss') : ''
                        }
                        this.axios({
                            method: 'post',
                            url: '/workorder/workorder/updateTimes',
                            data
                        }).then(res => {
                            if (res.code === 200) {
                                this.$Message.success(({content:'修改成功！',duration:3,closable:true}))
                            }else {
                                this.$Message.warning(({content:res.msg,duration:6,closable:true}))
                            }
                        })
                    }
                }else if (type == 5) {
                    this.changeEdit.edit5 = !this.changeEdit.edit5
                    if (confirm == 'update') {
                        let data = {
                            id: this.detailObj.id,
                            startTime: this.detailObj.startTime ? this.$moment(this.detailObj.startTime).format('YYYY-MM-DD HH:mm:ss') : ''
                        }
                        this.axios({
                            method: 'post',
                            url: '/workorder/workorder/updateTimes',
                            data
                        }).then(res => {
                            if (res.code === 200) {
                                this.$Message.success(({content:'修改成功！',duration:3,closable:true}))
                            }else {
                                this.$Message.warning(({content:res.msg,duration:6,closable:true}))
                            }
                        })
                    }
                }else if (type == 6) {
                    this.changeEdit.edit6 = !this.changeEdit.edit6
                    if (confirm == 'update') {
                        let data = {
                            id: this.detailObj.id,
                            completeTime: this.detailObj.completeTime ? this.$moment(this.detailObj.completeTime).format('YYYY-MM-DD HH:mm:ss') : ''
                        }
                        this.axios({
                            method: 'post',
                            url: '/workorder/workorder/updateTimes',
                            data
                        }).then(res => {
                            if (res.code === 200) {
                                this.$Message.success(({content:'修改成功！',duration:3,closable:true}))
                            }else {
                                this.$Message.warning(({content:res.msg,duration:6,closable:true}))
                            }
                        })
                    }
                }else {
                    this.changeEdit.edit7 = !this.changeEdit.edit7
                    if (confirm == 'update') {
                        let data = {
                            id: this.detailObj.id,
                            acceptTime: this.detailObj.acceptTime ? this.$moment(this.detailObj.acceptTime).format('YYYY-MM-DD HH:mm:ss') : ''
                        }
                        this.axios({
                            method: 'post',
                            url: '/workorder/workorder/updateTimes',
                            data
                        }).then(res => {
                            if (res.code === 200) {
                                this.$Message.success(({content:'修改成功！',duration:3,closable:true}))
                            }else {
                                this.$Message.warning(({content:res.msg,duration:6,closable:true}))
                            }
                        })
                    }
                }
            },
            //获取故障数据
            getMainList() {
                this.axios({
                    method: 'get',
                    url: '/workorder/workorderFaultNature/selectList',
                    params: {}
                }).then(res => {
                    if (res.code === 200) {
                        this.mainTypeList = res.data
                    }else {
                        this.$Message.warning(({content:res.msg,duration:6,closable:true}))
                    }
                })
            },
            handleRemote(query) {
                if (query !== '') {
                    this.searchLoading = true;
                    this.axios({
                        method: 'get',
                        url: '/workorder/workorderDealType/list',
                        params: {
                            faultName: query,
                            pageNo: 1,
                            pageSize: 50
                        }
                    }).then(res => {
                        
                        if (res.code === 200) {
                            this.infoList = res.data.record
                        }else {
                            this.$Message.warning(({content:res.msg,duration:6,closable:true}))
                        }
                    }).finally(() => {
                        this.searchLoading = false
                    })
                } else {
                    this.infoList = [];
                }
            },
            handleChangeWl(val) {
                console.log(val)
                console.log(this.infoList)
                let arr = this.infoList.length ? this.infoList.filter(item => item.faultName === val) : []
                console.log(arr)
                this.detailObj.solutions = arr.length ? arr[0].dealType : ''
            },
            show(order) {
                console.log(order)
                this.orderDetailVisible = true
                this.changeEdit = {
                    edit1: false,
                    edit2: false,
                    edit3: false,
                    edit4: false,
                    edit5: false,
                    edit6: false,
                    edit7: false,
                }
                this.getDetail(order)
                this.statusText = order.statusText
            },

            getDetail(order) {
                let params = {
                    id: order.orderId,
                    workorderNo: order.workorderNo
                }
                this.axios({
                    method: 'post',
                    url: '/workorder/workorder/queryById',
                    data: params
                }).then(res => {
                    if (res.code === 200) {
                        this.detailObj = res.data
                        this.detailObj.photos = res.data.pics ? res.data.pics.split(',') : []
                        this.fileId = res.data.fileId
                        this.makeDataSource = res.data.workorderRecordList1 ? res.data.workorderRecordList1 : []
                        this.repairDataSource = res.data.workorderRecordList2 ? res.data.workorderRecordList2 : []
                        this.detailObj.purchased = res.data.purchased ? res.data.purchased : 0
                        this.detailObj.mainTyppe = res.data.mainType
                        this.detailObj.elecWarn = res.data.elecWarn ? res.data.elecWarn : ''
                        this.isRepair = res.data.mainType == 1 ? true : false
                        this.isOther = res.data.mainType == 3 ? true : false
                        this.isDevice = res.data.purchased == 1 ? true : false
                        this.detailObj.result = res.data.acceptResult ? res.data.acceptResult : ''
                        this.isResult = res.data.acceptResult ? true : false
                        this.isResultNumber = this.detailObj.result == 2 ? false : true
                        this.detailObj.days = res.data.days ? res.data.days : null
                        this.detailObj.broken = res.data.broken ? res.data.broken : 0
                    }else {
                        this.$Message.warning(({content:res.msg,duration:6,closable:true}))
                    }
                })
            },
            //文件上传
            handleBeforeUpload(file) {
                let formData = new FormData();
                formData.append("file", file);
                formData.append("dir", 'device')
                let config = {
                    headers: {
                        "Content-Type": "multipart/form-data"
                    }
                };
                this.axios({
                    method: 'post',
                    url: '/fileServer/upload',
                    data: formData,
                    config,
                }).then(res => {
                    
                    if (res.code == 200) {
                        this.$nextTick(() => {
                            this.detailObj.checkUrl = res.data.fileUrl
                            this.detailObj.checkFile = res.data.fileName
                            this.detailObj.checkPath = res.data.filepath
                        })
                    }else {
                        this.$Message.warning(({content: res.msg, duration: 6, closable: true}))
                    }
                }).catch(() => {});
                return false;
            },
            handleAcceptBeforeUpload(file) {
                let formData = new FormData();
                formData.append("file", file);
                formData.append("dir", 'device')
                let config = {
                    headers: {
                        "Content-Type": "multipart/form-data"
                    }
                };
                this.axios({
                    method: 'post',
                    url: '/fileServer/upload',
                    data: formData,
                    config,
                }).then(res => {
                    
                    if (res.code == 200) {
                        this.$nextTick(() => {
                            this.detailObj.acceptUrl = res.data.fileUrl
                            this.detailObj.acceptFile = res.data.fileName
                            this.detailObj.acceptPath = res.data.filepath
                            this.uploadAcceptFile()
                        })
                    }else {
                        this.$Message.warning(({content: res.msg, duration: 6, closable: true}))
                    }
                }).catch(() => {});
                return false;
            },
            handleDeleteUpload(type) {
                if (type == 0) {
                    this.detailObj.checkFile = ''
                }else {
                    this.fileDeleteVisible = true
                }
            },
            handlePreview(type,fileUrl) {
                if (type == 0) {
                    window.open(fileUrl)
                }else {
                    window.open(fileUrl)
                }
            },
            uploadAcceptFile() {
                console.log(this.detailObj.acceptFile)
                let data = {
                    attachmentType: 3,
                    fileName: this.detailObj.acceptFile,
                    filePath: this.detailObj.acceptPath,
                    fileUrl: this.detailObj.acceptUrl,
                    workorderNo: this.detailObj.workorderNo
                }
                this.axios({
                    method: 'post',
                    url: '/workorder/workorderAttachment/add',
                    data
                }).then(res => {
                    if (res.code === 200) {
                        this.fileId = res.data.id
                        this.detailObj.acceptFileUrl = res.data.fileUrl ? res.data.fileUrl : ''
                        this.$Message.success(({content:'上传成功！',duration:6,closable:true}))
                    }else {
                        this.$Message.warning(({content:res.msg,duration:6,closable:true}))
                    }
                })
            },
            handleCancel() {
                this.orderDetailVisible = false
            },
            handleOk() {
                this.orderDetailVisible = false
            },
            handleRefresh(value) {
                console.log(value)
                this.detailObj.assit = value ? value.substr(0, value.length-1) : ''
            },
            handleRepairChange(val) {
                console.log(val)
                this.isRepair = val === 1 ? true : false
                this.isOther = val === 3 ? true : false
                this.detailObj.purchased = ''
            },
            handleDeviceChange(val) {
                console.log(val)
                this.isDevice = val === 1 ? true : false
            },
            handleResultChange(val) {
                this.isResultNumber = val == 1 ? true : false
                this.detailObj.result = val
                this.detailObj.days = null
            },
            handleChooseChange() {
                this.$refs.signleMemberModal.show(this.detailObj,1)
            },
            //设备新增
            handleAddDevice() {
                this.$refs.deviceModal.show(this.detailObj.workorderNo)
            },
            handleDeviceDelete(rowIndex) {
                this.makeDataSource = this.makeDataSource.filter((item,index) => index != rowIndex)
            },
            //设备刷新
            handelDeviceRefresh(data) {
                console.log(data)
                console.log(this.makeDataSource)
                this.makeDataSource = [...this.makeDataSource, ...data]
            },
            //设备维修
            handleAddRepair() {
                this.$refs.repairModal.add(this.detailObj, 'add')
            },
            //设备维修删除
            handleRepairDelete(record) {
                this.deleteVisible = true
                this.deleteId = record.id
            },
            //设备维修编辑
            handleRepairEdit(record) {
                this.$refs.repairModal.edit(record,this.detailObj, 'edit')
            },
            handleTurnRepairAdd(data) {
                console.log(data)
                this.repairDataSource.push(data)
            },
            handleTurnRepairEdit(data) {
                console.log(data)

                this.repairDataSource = this.repairDataSource.map(item => {
                    if (item.id == data.id) {
                        return {
                            ...data
                        }
                    }else {
                        return {
                            ...item
                        }
                    }
                })
                console.log(this.repairDataSource)
            },
            handleRepairDetail(row) {
                this.$refs.repairDetailListModal.show(row, 'edit')
            },
            handleRepairDetailList(row) {
                this.$refs.repairDetailListModal.show(row, 'detail')
            },
            handleFileDeleteOk() {
                this.fileDeleteLoading = true
                this.axios({
                    method: 'delete',
                    url: '/workorder/workorderAttachment/delete',
                    params: {
                        id: this.fileId
                    }
                }).then(res => {
                    
                    if(res.code === 200){
                        this.$Message.success('删除成功！')
                        this.detailObj.acceptFile = ''
                    }else{
                        this.$Message.warning(({content:res.msg,duration:6,closable:true}));
                    }
                }).finally(() => {
                    this.fileDeleteLoading = false
                    this.fileDeleteVisible = false
                })
            },
            handleDeleteCancel() {
                this.deleteVisible = false
            },
            handleDeleteOk() {
                this.loadingDelete = true
                this.axios({
                    method: 'delete',
                    url: '/workorder/workorderRecord/delete',
                    params: {
                        id: this.deleteId
                    }
                }).then(res => {
                    
                    if(res.code === 200){
                        this.$Message.success('删除成功！')
                        this.repairDataSource = this.repairDataSource.filter(item => item.id != this.deleteId)
                    }else{
                        this.$Message.warning(({content:res.msg,duration:6,closable:true}));
                    }
                }).finally(() => {
                    this.deleteVisible = false
                    this.loadingDelete = false
                })
            },
            handleVisibleChange(val) {
                console.log(val)
                if(!val) {
                    this.$emit('handleRefresh')
                }
            },
            handleWorkCancel() {
                this.orderDetailVisible = false
            },
            handleSave() {
                //委外确认
                if (!this.detailObj.checkFile) {
                    this.$Message.warning(({content:'请上传委外审批单据！',duration:6,closable:true}))
                    return false
                }
                // if (!this.detailObj.sapNo) {
                //     this.$Message.warning(({content:'请上传SAP申请单号！',duration:6,closable:true}))
                //     return false
                // }
                this.loadingVisible = true
                let data = {
                    attachmentType: 2,
                    fileName: this.detailObj.checkFile,
                    filePath: this.detailObj.checkPath,
                    fileUrl: this.detailObj.checkUrl,
                    workorderNo: this.detailObj.workorderNo
                }
                this.axios({
                    method: 'post',
                    url: '/workorder/workorderAttachment/add',
                    data
                }).then(res => {
                    if (res.code === 200) {
                        this.orderDetailVisible = false
                        this.$Message.success(({content:'操作成功！',duration:6,closable:true}))
                        // this.detailObj.outConfirmTime = this.$moment(new Date()).format('YYYY-MM-DD HH:mm:ss')
                        // this.detailObj.checkFileUrl = res.data.fileUrl ? res.data.fileUrl : ''
                        // this.statusText = Number(this.statusText) + 1
                    }else {
                        this.$Message.warning(({content:res.msg,duration:6,closable:true}))
                    }
                }).finally(() => {
                    this.loadingVisible = false
                })
            },
        }
    }
</script>

<style scoped lang="scss">
    .basic-info {
        .basic-info-title {
            span {
                display: inline-block;
                width: 7px;
                height: 24px;
                background: #187bdb;
            }
            h2 {
                display: inline-block;
                font-size: 16px;
                padding-left: 10px;
                position: relative;
                &::before {
                    content:"";
                    position: absolute;
                    left: 0;
                    top: 0;
                    width: 7px;
                    height: 24px;
                    background: #187bdb;
                }
            }
        }
        .basic-info-body {
            margin: 10px;
            color: #333;
            font-size: 13px;
            font-family: 'Arial Normal', 'Arial', sans-serif;
            font-weight: 400;
            border-left: 1px solid #eee;
            .basic-info-body-label {
                display: inline-block;
                width: 40%;
                height: 48px;
                line-height: 48px;
                background: #f5f6f7;
                text-align: right;
                padding-right: 10px;
                /*border-left: 1px solid #B6B7B7;*/
                /*border-top: 1px solid #B6B7B7;*/
                /*border-bottom: 1px solid #B6B7B7;*/
            }
            .basic-info-body-item {
                /*display: inline-block;*/
                /*width: 60%;*/
                /*height: 48px;*/
                /*line-height: 48px;*/
                /*text-align: left;*/
                padding: 0 10px;
                /*border-left: 1px solid #eee;*/
                /*border-right: 1px solid #eee;*/
                /*border-right: 1px solid #B6B7B7;*/
                /*border-top: 1px solid #B6B7B7;*/
                /*border-bottom: 1px solid #B6B7B7;*/
            }
        }
    }
    .preview {
        position: absolute;
        right:10px;
        top:0;
        width: 35px;
        height: 35px;
        background: #eee;
        .preview-img {
            width: 35px;
            height: 35px;
            overflow: hidden;
        }
    }
    ::v-deep.ivu-form-item-label {
        /*display: inline-block;*/
        /*width: 40%;*/
        /*height: 48px;*/
        /*line-height: 48px;*/
        background: #f5f6f7;
        text-align: right;
        border-right: 1px solid #eee;
        /*padding-right: 10px;*/
    }
    ::v-deep.ivu-form-item {
        margin-bottom: 0;
        border-right: 1px solid #eee;
    }
    ::v-deep.Input-wrapper {
        width: 90%;
        margin: 0 10px;
        .ivu-select-selection {
            height: 30px;
            border: none;
            box-shadow: none;
        }
        .ivu-input {
            border: none;
            box-shadow: none;
        }
    }
    .btn-wrapper {
        position: relative;
        .btn-action {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            top: 100px;
        }
    }
    .upload-wrapper {
        display: inline-block;
        position: relative;
        span {
            display: inline-block;
            width: 100px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            margin-bottom: -8px;
            line-height: 26px;
        }
        .upload-action {
            display: none;
            position: absolute;
            left: 0;
            right: 0;
            top: -1px;
            bottom: 0px;
            background: rgba(0,0,0,.6);
            i {
                cursor: pointer;
                margin: 0 10px;
            }
        }
        &:hover {
            .upload-action {
                display: inline-block;
            }
        }
    }
    ::v-deep.ivu-upload {
        margin-bottom: -12px;
        display: inline-block;
    }
    .over-wrapper {
        width: 200px;
        height: 23px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    ::v-deep.ivu-select-selected-value {
        background: #ffffff;
        color: #333333;
    }
    ::v-deep.ivu-input-disabled {
        background: #ffffff;
        color: #333333;
    }
    ::v-deep.ivu-select-placeholder {
        background: #ffffff;
        color: #333333;
    }
    ::v-deep.ivu-select-input {
        background: #fff;
        height:30px;
    }
</style>
